@charset "UTF-8";

:root {
  --border-radius: 6px;
  --border-color: #dfdfdf;
  --background-color: #161616;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  background-color: var(--background-color);
}

.hidden {
  display: none !important;
}

/* 主内容区 */
div.content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding-bottom: 30px;
}

/* 标题 */
div.content .caption {
  font-size: 2rem;
  color: white;
  margin: 1.5rem 0;
  font-family: "fangsong", "monospace";
  font-weight: bold;
  text-shadow: 4px 5px 8px rgb(24, 24, 24, .53);
}

/* @Start 游戏初始化区域 */
div.content .initializer {
  width: 35vw;
  min-width: 300px;
  overflow: hidden;
  background-color: white;
  border-radius: 6px;
  box-shadow: 5px 5px rgba(0, 0, 0, .04);
  padding: 20px;
  gap: 20px;
}

div.content .initializer form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

div.content .initializer .buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 5rem;
}

div.content .initializer .buttons button {
  flex: 2 1 auto;
}

div.content .initializer .buttons button:last-child {
  flex: 3 1 auto;
}

div.content .initializer .create-result {
  display: none;
  height: 26vh;
}

div.content .initializer .create-result .result-link {
  word-wrap: break-word;
  word-break: normal;
}

div.content .initializer.finished form {
  display: none;
}

div.content .initializer.finished .create-result {
  display: block;
}

/* @End - 游戏初始化区域 */

/* @Start - 棋盘 */
div.content .core-area {
  min-width: 300px;
}


div.content .chessboard {
  --row: 5;
  /*width: 50vw;*/
  /*min-height: 50vh;*/
  /*display: flex;*/
  /*overflow: hidden;*/
  border-radius: 6px;
  /*flex-direction: column;*/
  box-shadow: 5px 5px rgba(0, 0, 0, .25);
  position: relative;
}

div.content .chessboard:after {
  content: attr(result);
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, .21);
  border-radius: 6px;
}

div.content .chessboard .chess-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid var(--border-color);
}

div.content .chessboard .chess-row:first-child > .chess-piece:first-child {
  border-top-left-radius: 6px;
}

div.content .chessboard .chess-row:first-child > .chess-piece:last-child {
  border-top-right-radius: 6px;
}

div.content .chessboard .chess-row:last-child > .chess-piece:first-child {
  border-bottom-left-radius: 6px;
}

div.content .chessboard .chess-row:last-child > .chess-piece:last-child {
  border-bottom-right-radius: 6px;
}

div.content .chessboard .chess-row:last-child {
  border: none;
}

div.content .chessboard .chess-piece {
  width: calc(100vw / var(--row, 5) / 2.5);
  flex: 1 1 auto;
  height: auto;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  display: inline-flex;
  border-right: 1px solid var(--border-color);
  background-color: white;
  transition: background-color .2s linear;
  user-select: none;
  position: relative;
}

div.content .chessboard.disabled .chess-piece {
  background-color: #f1f1f1;
}

div.content .chessboard .chess-piece:last-child {
  border: none;
}

div.content .chessboard:not(.disabled) .chess-row:nth-child(even) .chess-piece:nth-child(even),
div.content .chessboard:not(.disabled) .chess-row:nth-child(odd) .chess-piece:nth-child(odd) {
  background-color: #fbfbfb;
}

div.content .chessboard:not(.disabled) .chess-piece:hover {
  cursor: pointer;
  background-color: #f1f1f1 !important;
}

div.content .chessboard:not(.disabled) .chess-piece:active {
  cursor: pointer;
  background-color: #e9e9e9 !important;
}

div.content .chessboard .chess-row .chess-piece::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: 30%;
}

div.content .chessboard .chess-row .chess-piece.black::before,
div.content .chessboard .chess-row .chess-piece.white::before {
  border-radius: 100%;
  border: 1px solid #878787;
  box-shadow: 3px 3px 7px rgba(0, 0, 0, .24);
}

div.content .chessboard .chess-row .chess-piece.black::before {
  background: linear-gradient(135deg, #d9d9d9 20%, #000000);
}

div.content .chessboard .chess-row .chess-piece.white::before {
  background: linear-gradient(135deg, #ffffff 20%, #bbbbbb);
}

/* @End - 棋盘 */

/* @Start - 控制按钮 */
div.content .controller {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

div.content .controller button {
  width: 20vw;
}
/* @End - 控制按钮 */